<style scoped lang="less">
.wholeWorldList {
  max-width: 800px;
  margin: 0 auto;

  &__title{
    font-size: 20px;
    font-weight: 400;
    color: #141B27;
  }

  &__grid{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
    grid-gap: 10px;
    margin-top: 10px;
    &__item{
      &__cover-box{
        &:hover > &__play-button{
          opacity: 1;
          backdrop-filter: blur(2px);
          transform: scale(1) translate(-50%,-50%);
        }
        &:hover > &__image{ transform: scale(1.2);}
        border-radius: 10px;
        overflow: hidden;
        width: 100%;
        position: relative;
        &__play-button{
          border-radius: 50%;
          transition: all linear .3s;
          position: absolute;
          top: 50%;
          left: 50%;
          opacity: 0;
          transform-origin: center;
          transform: translate(-50%,-50%) scale(5);
          background: rgba(255, 255, 255, 0.53);
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          &__icon{
            margin-left: 2px;
            width: 20px;
            height: 20px;
          }
        }
        &__image{
          transition: all ease-in-out .3s;
          display: block;
          width: 100%;
          object-fit: cover;
        }
        &__play-count{
          top: 0;
          right: 0;
          position: absolute;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: center;
          padding: 2px 8px;
          border-radius: 0 10px 0 10px;
          background: rgba(153, 153, 153, 0.435);
          backdrop-filter: blur(2px);
          &__icon{
            width: 10px;
            height: 10px;
            margin-right: 4px;
          }
          &__text{
            font-size: 12px;
            color: white;
          }
        }
      }
      &__title{
        cursor: pointer;
        &:hover > &__text{
          color: #d23d2d;
        }
        margin-top: 4px;
        &__text{
          transition: all linear .3s;
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }
}
</style>
<template>
  <div class="wholeWorldList">
    <div class="wholeWorldList__title">全球榜</div>
    <div class="wholeWorldList__grid">
      <div class="wholeWorldList__grid__item" v-for="(ele,index) of listCom">
        <div class="wholeWorldList__grid__item__cover-box">
          <img :src="ele.coverImageUrl" class="wholeWorldList__grid__item__cover-box__image">
          <div class="wholeWorldList__grid__item__cover-box__play-count">
            <img :src="playIconWhite" class="wholeWorldList__grid__item__cover-box__play-count__icon">
            <div class="wholeWorldList__grid__item__cover-box__play-count__text">{{ ele.playCount }}</div>
          </div>
          <div class="wholeWorldList__grid__item__cover-box__play-button" @click.stop="handlePlayList(ele)">
            <img :src="playIcon" class="wholeWorldList__grid__item__cover-box__play-button__icon">
          </div>
        </div>
        <div class="wholeWorldList__grid__item__title" @click="handleGoDetail(ele)">
          <div class="wholeWorldList__grid__item__title__text"> {{ ele.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// todo 资源
import NetEasyMusicStore from '../../store'
//@ts-ignore
import playIcon from '../../icon/play-red.png'
//@ts-ignore
import playIconWhite from '../../icon/play.png'
import {computed} from "vue";
import {formatNumber} from "@/helper";

const props = defineProps({
  list:{ type:Array, default: () => ([]) },
})
const listCom = computed(() => (props.list?.map((ele:any) => ({
  ...ele,
  coverImageUrl: ele?.coverImgUrl,
  title: ele?.name ?? '-',
  playCount: formatNumber(ele?.playCount),
}))))

// 交互
/** 播放全部 */
const handlePlayList = ( event:any ) => {
  const { id } = event
  if(!id) return
  NetEasyMusicStore.setPlayListById(id)
}
/** 进入详情页 */
const handleGoDetail = (event:any) => {
  const { id } = event
  NetEasyMusicStore.pushRouter('playListDetail',{id})
}
</script>

